<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fm" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="/resource/js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="/resource/js/bootstrap.js"></script>
<script type="text/javascript" src="/resource/js/jquery.validate.js"></script>
<script type="text/javascript" src="/resource/My97DatePicker/WdatePicker.js"></script>
<link href="/resource/css/bootstrap.css" rel="stylesheet">
<link href="/resource/css2/index3.css" rel="stylesheet">
<link href="/resource/css/jqueryvalidate/screen.css" rel="stylesheet">
</head>
<body>
	<form:form action="ruzhu" method="post" modelAttribute="dormitory" enctype="multipart/form-data">
		学生:
		<form:select path="uid">
			<form:option value="">请选择</form:option>
			<form:options items="${users }" itemLabel="uname" itemValue="uid"/>
		</form:select>
		<br><br>
		住宿楼:
		<form:select path="fid" onchange="erji(this.value)">
			<form:option value="">请选择</form:option>
			<form:options items="${fools }" itemLabel="fname" itemValue="fid"/>
		</form:select>
		<br><br>
		宿舍号:
		<form:select path="did" id="did" onchange="sanji(this.value)">
			<form:option value="">请选择</form:option>
			<form:options items="${dormitorys }" itemLabel="dname" itemValue="did"/>
		</form:select>
		<br><br>
		
		当前宿舍人数:
		<span id="sp1"></span>
		<br><br>
		当前宿舍入住人名:
		<span id="sp2"></span>
		<br><br>
		<button   disabled="disabled" id="ruzhubtn">入住</button>
	</form:form>
	
		
	
	
	<script type="text/javascript">
		function erji(fid) {
				$("#did").html("<option value=''>请选择</option>");
				$.post(
					"erji",
					{fid:fid},
					function (msg) {
						for ( var i in msg) {
							$("#did").append("<option value='"+msg[i].did+"'>"+msg[i].dname+"</option>")
						}
					},
					"json"
				)
		}
		
		function sanji(did) {
			/* $("#did").html("<option value=''>请选择</option>"); */
			$("#sp1").html("");
			$("#sp2").html("");
			//清空
			$.post(
				"sanji",
				{did:did},
				function (msg) {
					for ( var i in msg) {
						/* $("#did").append("<option value='"+msg[i].did+"'>"+msg[i].dname+"</option>") */
						$("#sp1").html(msg.unums);
						$("#sp2").html(msg.unames);
					}
					
					
					//判断是否禁用按钮
					var unums=$("#sp1").html();
					if (unums<4 ) {
						$("#ruzhubtn").attr("disabled",false);
					}else {
						$("#ruzhubtn").attr("disabled",true);
					}
					
				},
				"json"
			)
		}
	
		
	</script>
	
</body>
</html>